<template>
  <div>
    <el-page-header @back="goBack" content="详细信息"
                    style="font-family: 'Microsoft YaHei';font-weight: 700;color: #67aaf1;font-size: 30px">
    </el-page-header>
    <el-select v-model="ctpName" style="width: 100%">
      <el-option value="ctp=1"></el-option>
      <el-option value="ctp=2"></el-option>
      <el-option value="ctp=3"></el-option>
      <el-option value="ctp=4"></el-option>
      <el-option value="ctp=5"></el-option>
    </el-select>
    <el-tabs active-name="eth" type="card" style="line-height: 30px;">
        <el-tab-pane label="ETH" name="eth">
          <EthCtp/>
        </el-tab-pane>

        <el-tab-pane label="ODU" name="odu">
          <OduCtp/>
        </el-tab-pane>

        <el-tab-pane label="VC" name="vc">
          <OduCtp v-if="false"/>
          <VcCtp />
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import EthCtp from "@/components/dispose/ctp/EthCtp";
import OduCtp from "@/components/dispose/ctp/OduCtp";
import VcCtp from "@/components/dispose/ctp/VcCtp";

export default {
  name: "CTP",
  components: {VcCtp, OduCtp, EthCtp},
  data() {
    return {
      ctpName: 'ctp=1',
      isEth: false,
      isOdu: false,
      isSdh: false,
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    isTabs(protocol) {
      switch (protocol) {
        case 'ETH':
          this.isEth = true;
          this.isOdu = false;
          this.isSdh = false;
          break;
        case 'ODU':
          this.isEth = false;
          this.isOdu = true;
          this.isSdh = false;
          break;
        case 'SDH':
          this.isEth = false;
          this.isOdu = false;
          this.isSdh = true;
          break;
        default:
          this.isEth = false;
          this.isOdu = false;
          this.isSdh = false;
          break;
      }
    }
  },
  mounted() {
    console.log(this.$route.params);
    this.ctpName = this.$route.params.name;
    this.isTabs(this.$route.params.protocol);
  }

}
</script>

<style scoped>

</style>